<!-- 到期设备 -->
<template>
  <el-card shadow="never" class="table-container">
    <div class="app-container">
      <div class="titleMolde">设备规格设定
      </div>
      <div class="Filters">
        <el-input v-model="queryParams.name" style="width: 200px" placeholder="名称" />
        <el-button type="primary" class="mrg-lf-10" @click="handleQuery">查询</el-button>
        <el-button type="primary" class="mrg-lf-10"  v-hasPerm="['deviceModel:add']" @click="addPageQuery">添加</el-button>
      </div>
      <el-table v-loading="loading" :data="pageData">
        <el-table-column label="序号" align="center" type="index" width="60" />
        <el-table-column label="设备规格名称" align="center" prop="name" />
        <el-table-column label="客户名称" align="center" prop="customerName" />
        <el-table-column label="创建时间" align="center" prop="createTime" />
        <el-table-column label="操作" align="center" fixed="right" width="220">
          <template #default="scope">
            <el-button title="编辑" type="primary"  v-hasPerm="['deviceModel:edit']" icon="edit" circle @click.prevent="editRow(scope.row)" />
            <el-button title="删除" type="danger"  v-hasPerm="['deviceModel:delete']" icon="delete" circle @click.prevent="deleteRow(scope.row)" />
          </template>
        </el-table-column>
      </el-table>
      <pagination @pagination="handleQuery" v-if="queryParams.pages.total > 0" v-model:total="queryParams.pages.total"
        v-model:page="queryParams.pages.current" v-model:limit="queryParams.pages.size" />
    </div>
  </el-card>

  <el-dialog destroy-on-close class="dialogTableVisibleclass" v-model="outerVisible" title="新增设备规格">
    <div class="div-container">
      <el-form ref="AddruleFormRef" :rules="rules" :model="addDeviceType" label-width="auto" style="width: 600px"
        class="form-container">
        <el-form-item label="设备规格名称" prop="name">
          <el-input v-model="addDeviceType.name" />
        </el-form-item>
        <!-- <el-form-item label="备注" prop="remark">
          <el-input v-model="addDeviceType.customerId" type="textarea" />
        </el-form-item> -->
      </el-form>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="info" @click="outerVisible = false">关闭</el-button>
        <el-button type="primary" @click="addSave(AddruleFormRef)">增加</el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog destroy-on-close class="dialogTableVisibleclass" v-model="outerVisibleEdit" title="编辑设备型号">
    <div class="div-container">
      <el-form ref="EditruleFormRef" :rules="rules" :model="editDeviceType" label-width="auto" style="width: 600px"
        class="form-container">
        <el-form-item label="设备规格名称" prop="name">
          <el-input v-model="editDeviceType.name" />
        </el-form-item>
        <!-- <el-form-item label="备注">
          <el-input v-model="editDeviceType.customerId"/>
        </el-form-item> -->
      </el-form>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="info" @click="outerVisibleEdit = false">关闭</el-button>
        <el-button type="primary" @click="editSave(EditruleFormRef)">编辑</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import DeviceSpecApi, { FencesPageQuery, DeviceTypeReq } from "@/api/deviceSpec";
import type { FormInstance, FormRules } from 'element-plus'
const AddruleFormRef = ref<FormInstance>()
const EditruleFormRef = ref<FormInstance>()

const rules = reactive<FormRules<DeviceTypeReq>>({
  name: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
  ],
})

/**
@date: 2024-08-31 14:55:16
新增电子围栏
*/
let outerVisible = ref(false);
/**
@date: 2024-08-31 14:55:01
编辑电子围栏
*/
let outerVisibleEdit = ref(false);
const loading = ref(false);
let pageData = ref()
/** 用户查询参数  */
let queryParams = reactive<FencesPageQuery>({
  "pages": {
    "current": 1,
    "size": 10,
    "startTime": "",
    "endTime": "",
    "orders": [
      {
        "column": "",
        "asc": true
      }
    ]
  },
  "name": undefined,
  "customerId": undefined,
});
let addDeviceType = reactive<DeviceTypeReq>({
  name: "",
  customerId: undefined,
});
let editDeviceType = reactive<DeviceTypeReq>({
  name: "",
  customerId: undefined,
});

/** 查询 */
function handleQuery() {
  loading.value = true;
  DeviceSpecApi.getFences(queryParams)
    .then((data) => {
      pageData.value = data.records;
      queryParams.pages.total = data.total;
      queryParams.pages.current = data.current;
      console.log('分页', data);
    })
    .finally(() => {
      loading.value = false;
    });
}

function addPageQuery() {
  addDeviceType.name=''
  outerVisible.value = true
  
}
const addSave = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      DeviceSpecApi.addDevType(addDeviceType)
        .then((data) => {
          console.log(data);
          handleQuery();
          ElMessage.success('添加成功');

        })
        .finally(() => {
          outerVisible.value = false

        });
    } else {
      console.log('error submit!', fields)
    }
  })
}

function editRow(datas: any) {
  outerVisibleEdit.value = true
  editDeviceType.id = datas.id
  editDeviceType.name = datas.name
  editDeviceType.customerId = datas.customerId
}
/**
@date: 2024-08-31 14:23:01
编辑电子围栏
*/
const editSave = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      DeviceSpecApi.editSave(editDeviceType)
        .then((data) => {
          handleQuery();
          ElMessage.success('编辑成功');
          outerVisibleEdit.value = false
        })
        .finally(() => {
          outerVisibleEdit.value = false

        });
    } else {
      console.log('error submit!', fields)
    }
  })
}
/**
@date: 2024-08-31 14:22:46
删除电子围栏
*/
function deleteRow(datas: any) {
  DeviceSpecApi.deleteSave(datas.id)
    .then((data) => {
      console.log('添加', data);
      handleQuery();
      ElMessage.success('删除成功');
    })
    .finally(() => {
    });
}


onMounted(() => {
  handleQuery();
});
</script>
<style lang="scss" scoped>
.mrg-lf-10 {
  margin-left: 10px;
}

.fontColor_333 {
  :deep(.el-input__inner) {
    color: #333;
  }
}

.titleMolde {
  font-weight: bold;
  position: relative;
  display: flex;
  padding-left: 15px;
  justify-content: space-between;
  align-items: center;

  &::after {
    content: "";
    width: 8px;
    height: 8px;
    position: absolute;
    left: 4px;
    top: 6px;
    background: #2cdfe5b5;
  }

  &::before {
    content: "";
    width: 8px;
    height: 8px;
    background: #09e0e7;
    position: absolute;
    left: 0;
    top: 2px;
  }

}

.app-container {
  position: relative;
  padding: 10px;

  .allTabContent {
    display: flex;
    align-items: center;
    position: absolute;
    top: 15px;
    right: 0;

    div {
      margin-left: 26px;
      font-weight: 700;

      span {
        margin-left: 8px;
      }
    }
  }
}

.Filters {
  margin: 10px 0;
  display: flex;
  align-items: center;

  .el-segmented {
    --el-segmented-item-selected-color: var(--el-text-color-primary);
    --el-segmented-item-selected-bg-color: #5cadff;
    --el-border-radius-base: 16px;
  }

  &>div {
    margin-right: 5px;
  }
}

.div-container {
  display: flex;
  width: 100%;
  color: #333;

  .div-left-container {
    width: 420px;

    .div_search {}
  }

  .div-right-container {
    width: calc(100% - 420px - 10px);
    margin-left: 10px;
    position: relative;

    #myPageTop {
      position: absolute;
      top: 60px;
      left: 10px;
      z-index: 6;
      background-color: #fff;
      border: 1px solid #ccc;
      padding: 10px;

      #tipinput {
        background-color: #fff;
        color: #333;
        border: 1px solid #ccc;
        padding: 5px;
      }
    }
  }

  :deep(.form-container) {
    .el-form-item__label {
      color: #333;
    }

    .el-input__inner {
      color: #333;
    }

    .el-textarea__inner {
      color: #333;

    }
  }
}
</style>
<style>
.amap-sug-result {
  z-index: 9999 !important;
  color: #333
}
</style>
